<template>
  <hsa-dialog v-model:visible="dialogVisible" title="选择数据目录" width="750">
    {{checkList}}
    <!-- 查询 -->
    <hsa-adaptive-pane>
      <hsa-title-pane>
        <hsa-title-pane-item>
          <template #title-suffix>
            <span data-v-ab65d6ec="" class="hsa-title-box"
              ><section class="hsa-title-box__mark"></section>
              <section>请输入查询条件快速查找</section></span
            >
            <span class="my-search-input">（查询条件至少选择一个）</span>
          </template>
          <el-form label-width="100">
            <hsa-row :gutter="20">
              <hsa-col :span="8">
                <el-form-item label="目录分类">
                  <el-input />
                </el-form-item> </hsa-col
              ><hsa-col :span="8">
                <el-form-item label="数据主管部门">
                  <el-input />
                </el-form-item> </hsa-col
              ><hsa-col :span="8">
                <el-form-item label="隶属系统">
                  <el-input />
                </el-form-item> </hsa-col
              ><hsa-col :span="8">
                <el-form-item label="数据目录名称">
                  <el-input />
                </el-form-item> </hsa-col
              ><hsa-col :span="8">
                <el-form-item label="数据表中文名">
                  <el-input />
                </el-form-item>
              </hsa-col>
              <template #footbar>
                <el-button type="default">取消</el-button>
                <el-button type="primary">查询</el-button>
              </template>
            </hsa-row>
          </el-form>
        </hsa-title-pane-item>
      </hsa-title-pane>
    </hsa-adaptive-pane>
    <!-- 对话框内容 -->
    <hsa-table v-bind="tableOption" ref="tableRef"></hsa-table>
    <!-- 对话框底部按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
  </hsa-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, h ,watch} from "vue";
import type { HsaTableColumn } from "hsa-ui";
import { dataDirectoryColumns } from "../directory/index";
import { ElCheckboxGroup, ElCheckbox } from "element-plus";
import LogBox from "@/modules/self-fetch/fetch-download-manage-data/model/log-box.vue";
// 控制对话框的显示与隐藏
const dialogVisible = ref(false);
const checkList = ref([]);
const tableOption = reactive({
  showIndex: false,
  data: ref<any[]>([
    { dataCatalogClassification: "dataCatalogClassification" },
    { dataCatalogClassification: "dataCatalogClassification2" },
    { dataCatalogClassification: "dataCatalogClassification3" },
  ]),
  columns: ref<HsaTableColumn[]>([
    {
      align: "center",
      label: "",
      type:"selection",
      width: 80,
      prop: "select",

    
    },
    ...dataDirectoryColumns,
  ]),
});
const tableRef=ref(null)
// 提交表单时的处理函数
const handleSubmit = () => {
  // 提交表单后关闭对话框
  const selectData=tableRef.value.getSelectionRows();
  console.log(selectData,"selectData")
  // dialogVisible.value = false;
};
const open = () => {
  dialogVisible.value = true;
};
defineExpose({
  open,
});
</script>
<style lang="scss" scoped>
.my-search-input {
  color: #f56c6c;
  font-size: 12px;
}
</style>
